<template>
	<view class="container">
		<view class="searchBox">
			<u-search :placeholder="resavePageSearchVal" :showAction="true" maxlength="20"
				:actionStyle="{color:'#00BF5B'}" focus actionText="搜索" :animation="true" v-model="searchVal"
				@clear="onSearchInputClear" @search="onSearch" @custom="onSearch"></u-search>
		</view>
		<view class="hotSearchBox">
			<view class="titleBox">
				<text>热门搜索</text>
				<u-icon name="reload" size="24" @click="onHotIconClick"></u-icon>
			</view>
			<view class="hotValBox">
				<view v-for="(item,index) in hotValMsg" :key="index" @click="onHotItemClick(item.searchName)">
					{{item.searchName}}
				</view>
			</view>
		</view>

		<view class="hotSearchBox" v-if="historyList && historyList.length">
			<view class="titleBox">
				<text>历史搜索</text>
				<u-icon name="trash" size="24" @click="onDeleteIconClick"></u-icon>
			</view>
			<view class="hotValBox historyBalBox">
				<view v-for="(item,index) in historyList" :key="index" @click="onHotItemClick(item)">{{item}}</view>
			</view>
		</view>
		<view class="searchContentBox searchInputBox" v-if="isSearchInputBoxShow">
			<view class="searchInputItemBox" v-for="(item,index) in searchInputArr" :key="index"
				@click="onSearchItemClick(item.businessId,item.businessType,item.title)">
				<rich-text :nodes="getTitleContent(item.title,1)"></rich-text>
				<image src="../../static/main/arrow-right.png"></image>
			</view>
		</view>
		<view class="searchContentBox" v-if="isSearchContentShow">
			<u-loading-page v-if="isLoading" :loading="isLoading" loading-text="搜索中..."></u-loading-page>
			<view v-else>
				<no-msg-box v-if="!productionVOList.length && !solutionVOList.length"></no-msg-box>
				<view v-else>
					<view class="searchTitleName" v-if="productionVOList.length">产品</view>
					<view class="searchItemBox" v-for="(item,index) in productionVOList" :key="index"
						@click="onSearchItemClick(item.id,1,item.name)">
						<rich-text :nodes="getTitleContent(item.name,1)"></rich-text>
						<rich-text :nodes="getTitleContent(item.briefIntroduction[0].content[0],2)"></rich-text>
						<image src="../../static/main/arrow-right.png"></image>
					</view>
					<view class="searchTitleName" v-if="solutionVOList.length">方案</view>
					<view class="searchItemBox" v-for="(item,index) in solutionVOList" :key="index"
						@click="onSearchItemClick(item.id,2,item.name)">
						<rich-text :nodes="getTitleContent(item.name,1)"></rich-text>
						<rich-text v-if="item.summary.length" :nodes="getTitleContent(item.summary[0].content[0],2)">
						</rich-text>
						<image :style="!item.summary.length && 'top:28rpx'" src="../../static/main/arrow-right.png">
						</image>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		hotSearch,
		querySearch,
		queryTitles
	} from "@/apis/index.js"

	import {
		baseURL,
		antiShake
	} from "@/utils/util"

	import noMsgBox from "@/components/noMsgBox.vue"
	import request from '@/utils/request.js'
	export default {
		components: {
			noMsgBox
		},
		data() {
			return {
				resavePageSearchVal: '',
				searchVal: '',
				hotValMsg: [],
				historyList: [],
				productionVOList: [],
				searchInputArr: [],
				solutionVOList: [],
				isSearchContentShow: false,
				isSearchInputBoxShow: false,
				isLoading: false,
				aaa: '',
			};
		},
		watch: {
			'searchVal': function(newVal, oldVal) {
				if (newVal) {
					if (this.isSearchContentShow) { // 如果点了搜索就不搜索这个
						return
					}
					this.onSearchChange(newVal)
				}else{
					this.onSearchInputClear()
				}
			}
		},
		onLoad(option) {
			if (option.val) {
				this.resavePageSearchVal = option.val
			}
			this.getHotSearch()
			this.historyList = uni.getStorageSync('historySearchList')
		},
		methods: {
			getColorTxt(val) {
				val = this.searchVal
				console.log(val)
				return `<span style="color:#00BF5B">${val}</span>`
			},
			getTitleContent(val, type) {
				let index = val.indexOf(this.searchVal)
				if (index == -1) {
					if (type == 1) {
						return `<div class="searchItemTitle">${val}</div>`
					} else if (type == 2) {
						return `<div class="searchItemMsg">${val}</div>`
					}
				}
				let v0 = val.substr(0, index)
				let v1 = val.substr(index + this.searchVal.length, val.length)
				if (type == 1) {
					return `
						<div class="searchItemTitle">${v0}${this.getColorTxt()}${v1}</div>
					`
				} else if (type == 2) {
					return `
						<div class="searchItemMsg">${v0}${this.getColorTxt()}${v1}</div>
					`
				}

			},
			getHotSearch() {
				hotSearch().then(res => {
					if (res.code == '00000000') {
						if (res.data && res.data.length) {
							this.hotValMsg = res.data
						}
					}
				})
			},
			onHotItemClick(data) {
				this.searchVal = data
				this.onSearch(data)
			},
			onHotIconClick() {
				this.getHotSearch()
			},
			onSearchChange(val) {
				queryTitles({
					searchContent: val
				}, res => { // api防抖
					if (res.code == '00000000') {
			 		if (res.data && res.data.length) {
							this.searchInputArr = res.data
							this.isSearchInputBoxShow = true
							this.isSearchContentShow = false
						} else {
							this.isSearchInputBoxShow = false
							this.searchInputArr = []
						}
					}
				})
			},
			// onSearchChange:antiShake(function (val) {
			//   console.log("防抖：", val);
			//   if(val == ''){
			//   	this.onSearchInputClear()
			// 	return
			//   }
			//   if(this.isSearchContentShow){ // 如果点了搜索就不搜索这个
			// 	  return
			//   }
			//   if(this.aaa){
			// 	  this.aaa.abort()
			//   }
			//   this.aaa = queryTitles({searchContent:val})
			//   this.aaa.then(res=>{
			//   	if(res.code == '00000000'){
			//   		if(res.data&&res.data.length){
			// 			this.searchInputArr = res.data
			// 			this.isSearchInputBoxShow = true
			// 			this.isSearchContentShow = false
			// 		}else{
			// 			this.isSearchInputBoxShow = false
			// 			this.searchInputArr = []
			// 		}
			//   	}
			//   }).catch(r=>console.error(r))
			// }, 300),

			onSearchInputClear() {
				this.isSearchContentShow = false
				this.isSearchInputBoxShow = false
			},
			updateHistory(val){
				let historySearch = uni.getStorageSync('historySearchList')
				if (!historySearch || !historySearch.length) {
					historySearch = [val]
				} else {
					// 如果搜索的存在的 当前搜索的顺序变为最新 不加新的
					for (let [index, item] of historySearch.entries()) {
						if (item != val) {
							if (historySearch.indexOf(val) == -1 && historySearch.length == 6) {
								historySearch.pop()
							}
						} else {
							historySearch.splice(index, 1)
						}
					}
					historySearch.unshift(val)
				
				}
				
				this.historyList = historySearch
				
				uni.setStorageSync('historySearchList', historySearch)
			},
			onSearch(val) {
				this.isLoading = true
				val = uni.$u.trim(val)
				if (!val) { // 如果没输入就搜placeholder的
					val = this.searchVal = this.resavePageSearchVal
				}
				if (!val) {
					return
				}
				this.isSearchContentShow = true
				this.isSearchInputBoxShow = false
				this.updateHistory(val)
				

				querySearch({
					searchContent: val
				}).then(res => {
					if (res.code == '00000000') {
						if (res.data.productionVOList && res.data.productionVOList.length) {
							this.productionVOList = res.data.productionVOList
						} else {
							this.productionVOList = []
						}
						if (res.data.solutionVOList && res.data.solutionVOList.length) {
							this.solutionVOList = res.data.solutionVOList
						} else {
							this.solutionVOList = []
						}
						this.isLoading = false
					} else {
						this.isLoading = false
					}
				})
			},
			onSearchItemClick(id, type, name = '') {
				if (!uni.getStorageSync('token')) { // 如果页面没token 需要登录
					uni.setStorageSync('needLogin', true)
					uni.switchTab({
						url: "/pages/index/index"
					})
					return
				}
				if(name){
					this.updateHistory(name)
				}
				if (type == 1) {
					uni.navigateTo({
						url: `/pages/product/productDetail?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/scheme/schemeDetail?id=${id}`
					})
					// if (name.indexOf('专精特新') !== -1) {
					// 	uni.navigateTo({
					// 		url: `/pages/message/systemMessageDetail?id=${id}&title=${name}`
					// 	})
					// } else {
					// 	uni.navigateTo({
					// 		url: `/pages/scheme/schemeDetail?id=${id}`
					// 	})
					// }
				}

			},
			onDeleteIconClick() {
				this.historyList = []
				uni.setStorageSync('historySearchList', [])
			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background-color: #FAFAFA;
	}

	.searchBox {
		background: #fff;
		padding: 15rpx 30rpx;
	}

	.hotSearchBox {
		padding: 0 30rpx;
		margin: 30rpx 0 44rpx;

		.titleBox {
			color: #3B384B;
			font-size: 28rpx;
			font-weight: 700;
			line-height: 48rpx;
			display: flex;
			justify-content: space-between;
		}

		.hotValBox {
			display: flex;
			flex-wrap: wrap;
			margin-top: 15rpx;

			&>view {
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 50rpx;
				color: #4A4A4A;
				font-size: 28rpx;
				background-color: #F5F5F5;
				padding: 0 12rpx;
				box-sizing: border-box;
				text-align: center;
				min-width: 28%;
				margin: 10rpx 0;
				margin-right: 10rpx;
			}
		}

		.historyBalBox {
			justify-content: start;

			&>view {
				margin-left: 15rpx;
			}
		}

	}

	.searchContentBox {
		position: fixed;
		height: calc(100vh - 96rpx);
		top: 96rpx;
		left: 0;
		width: 100%;
		background-color: #FAFAFA;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		overflow-y: auto;

		.searchTitleName {
			font-weight: 800;
			padding: 20rpx 0;
		}

		.searchItemBox {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			position: relative;
			margin-bottom: 20rpx;

			.searchItemTitle {
				margin-bottom: 10rpx;
				font-size: 32rpx;
				color: #3B384B;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 40rpx;
				width: 600rpx;
				display: block;
			}

			.searchItemMsg {
				color: #9C9C9C;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 40rpx;
				width: 600rpx;
				display: block;
			}

			image {
				position: absolute;
				right: 20rpx;
				top: 50rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.searchInputBox {
		background-color: #fff;

		.searchInputItemBox {
			padding: 25rpx 0;
			border-bottom: 1rpx solid #eee;
			font-size: 32rpx;
			color: #3B384B;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 40rpx;
			position: relative;
		}

		image {
			position: absolute;
			right: 10rpx;
			top: 32rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>
